[자바스크립트] 배열에 값 채우기, fill()

안녕하세요 ~ 오늘은 자바스크립트의 배열 메소드(Method) 중 하나인 fill()에 대하여 알아보려고 합니다. 어떤 부분을 중점으로 알아봐야 할까요?

- 배열 메소드 중 하나인 fill()은 무엇인가
- fill()을 활용하는 방안

그럼 아래에서 하나 하나 알아보죠.

# 배열 메소드 중 하나인 fill()은 무엇인가

배열에 사용되는 여러 메소드 중 하나인 fill()은 배열에 값을 채우는 메소드입니다. 먼저 fill()을 사용하는 문법을 알아보면 아래와 같습니다.

배열.fill(value, startIndex, endIndex)


value // [Required] 배열에 추가할 값
startIndex // [Optional] 추가할 값의 시작 인덱스
endIndex // [Optional] 추가할 값의 끝 인덱스(마지막 인덱스 미포함)

위와 같이 value는 필수값으로 배열에 원하는 값을 추가할 수 있으며 선택값으로 시작과 끝나는 위치를 정할 수도 있습니다. 참고로 endIndex의 경우 해당 index의 값은 value로 바뀌지 않는 미포함이며 endIndex 이 전까지만 변경되게 됩니다.

! 배열에 fill()을 사용한 예제 알아보기

실제로 fill()을 사용하여 다양한 값을 추가해도록 하겠습니다. 배열에 다양한 값을 fill()을 사용하여 추가하면 어떻게 결과가 나타나게 될지 확인해보겠습니다.


먼저 첫 번째 파라미터인 value만 추가해보겠습니다.

배열의 모든 값이 0으로 변경된 것을 확인할 수 있습니다. 이번에는 숫자가 아닌 문자를 사용해보려고 합니다.

문자열을 사용하여도 동일하게 모든 값이 'abc'로 변경된 것을 확인할 수 있습니다. 이처럼 모든 값을 변경할 경우 fill()을 사용하면 간단하게 바꿀 수 있습니다.

@ 배열의 일정 범위의 값만 변경하기
이번에는 일부의 값만 변경하려고 합니다. 아래의 배열 [1, 2, 3, 4, 5]에서 인덱스 2부터 4까지의 값만 0으로 변경해보도록 하겠습니다.

마지막 index가 4이므로 이 전까지의 값만 변경되게 되므로 3, 4만 0으로 변경됩니다.

! 배열값에 fill()을 활용하는 방안

map() 또는 filter()처럼 배열을 직업 조작하거나 변경 또는 반복하기 위한 메소드가 아니라 쓰임이 아주 많은 편은 아닙니다. 하지만 fill()을 사용할 경우 손쉽게 값을 채우거나 변경할 수 있습니다.


@ 0의 값을 가진 배열 100개 생성하기
만약 0의 값을 가진 배열 100개를 생성하려고 합니다. for문이나 forEach()등의 메소드를 사용할 수도 있지만 간단하게 fill()을 사용하여 값을 채우면 더욱 간단하겠습니다. 만약 for을 사용한다면 아래와 같이 작성할 수 있겠죠.

이번에는 fill()을 사용하여 만들어보겠습니다. 배열을 생성하기 위해서 new Array()를 함께 사용할 수도 있겠습니다. 아래 예제를 봐주세요

위 두 코드의 결과는 동일합니다. 값을 채우기 위해서 fill()을 사용하니 코드가 훨씬 간단하죠.

이처럼 일정한 값을 가지는 데이터를 처음 설정하는 등의 초기화 과정이 필요하다면 fill()을 활용하는 것 역시 좋은 방법이 될 수 있습니다.


여기까지 간략하게 배열 메소드 fill()에 대하여 알아보았습니다.